<!--
 * @Descripttion: damage报损报溢新增
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-17 21:37:56
 -->
<template>
  <div>
    <el-form
      ref="form"
      :model="dataObj"
      :rules="rules"
      label-position="right"
      label-width="100px"
      size="mini"
    >
      <el-form-item label="角色: " prop="roles">
        <el-checkbox-group v-model="dataObj.roles">
          <el-checkbox v-for="role in optionsData.roles" :key="role.value" :label="role.value">
            {{ role.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getOptions } from '@/api/sys/role.js'
import { listPricePermissions } from '@/api/sys/permission.js'
import clonedeep from 'clonedeep'

export default {
  name: 'EmployeePermission',
  components: { },
  mixins: [oftenuse],
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dataObj: {
        roles: [],
        relationPrices: [],
        relationStores: [],
        isCanViewOtherStore: '1',
        isCanViewOtherUserBill: '0',
        isCanCancleOtherUserBill: '0',
        isCanViewOtherUserCustomer: '0'
      },
      checkedStoreList: [],
      optionsData: {
        roles: [], pricePermissions: []
      },
      columnsData: [
        { field: 'name', title: '店铺', width: 100 }
      ],
      rules: {
        roles: [
          { validator: (rule, value, callback) => {
            if (!value) return callback(new Error('请选择一个角色'))
            if (value.length < 1) return callback(new Error('请选择一个角色'))
            callback()
          }, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    storeTreeData: function() {
      return []
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.initRoleData()
      this.initPricePermissions()
    },
    initRoleData() {
      getOptions().then(res => {
        if (!res.data.flag) return
        const data = res.data.data
        data.forEach(item => {
          item.value = item.id
          item.label = item.roleName
        })
        this.$set(this.optionsData, 'roles', data)
      })
    },
    initPricePermissions() {
      listPricePermissions().then(res => {
        if (res.data.flag) {
          const data = res.data.data
          this.$set(this.optionsData, 'pricePermissions', data)
        }
      })
    },
    getPermissionData() {
      const dataObj = clonedeep(this.dataObj)
      this.$delete(dataObj, 'roles')
      const data = dataObj
      return data
    },
    getRolesData() {
      return this.dataObj.roles
    },
    handleAddStoreTreeData({ treeStoreData }) {
      if (!treeStoreData) return []
      const isCanViewOtherStore = this.dataObj.isCanViewOtherStore
      treeStoreData.forEach(item => {
        const children = item.children
        if (isCanViewOtherStore === '1') {
          this.setChildrenDisabled(children, false)
        } else {
          this.setChildrenDisabled(children, false)
          this.setStoreAllChecked(children, true)
        }
      })
      return treeStoreData
    },
    handleUpdateStoreTreeData({ treeStoreData, checkedStoreList }) {
      if (!treeStoreData) return []
      const isCanViewOtherStore = this.dataObj.isCanViewOtherStore
      treeStoreData.forEach(item => {
        const children = item.children
        if (isCanViewOtherStore === '1') {
          this.setChildrenDisabled(children, false)
        } else {
          this.setChildrenDisabled(children, false)
          this.setStoreChecked(children, checkedStoreList, true)
        }
      })
      return treeStoreData
    },
    setChildrenDisabled(children = [], val) {
      children.forEach(item => {
        this.$set(item, 'disabled', val)
      })
    },
    setStoreAllChecked(children = [], val = true) {
      children.forEach(item => {
        this.$set(item, 'checked', val)
      })
    },
    setStoreChecked(children = [], checkedStoreList, val = true) {
      children.forEach(item => {
        if (checkedStoreList.indexOf(item.id) !== -1) {
          this.$set(item, 'checked', val)
        }
      })
    },
    setData({ permissionData, roleList }) {
      const defaultData = { relationPrices: [], relationStores: [] }
      const permissionDataObj = Object.assign(defaultData, permissionData)
      const data = { roles: roleList, ...permissionDataObj }
      this.dataObj = data
      this.checkedStoreList = permissionDataObj.relationStores || []
    }
  }
}
</script>

<style scoped>
</style>
